﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>购卡-银联闪付支付</title>
    <link href="../../../css/768_1366/global.css" rel="stylesheet"/>
    <link href="../../../css/768_1366/common.css" rel="stylesheet"/>
    <link href="../../../css/768_1366/salecard.css" rel="stylesheet"/>
<!--    <link rel="stylesheet" href="../../../css/768_1366/tuika.css"/>-->
    <style>
        .robot {
            position: relative;
            left: 50px;
            top: 30px;
        }
        .robot:after {
            position: absolute;
            content: "";
            font-size: 0;
            height: 0;
            line-height: 0;
            width: 0;
            z-index: 1;
            top: 165px;
            left: 185px;
            border-right: 200px solid #3fb3e5;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
        }

        .tuika_cardbox {
            background: url(../../../images/768_1366/unionpart.png) center 0 no-repeat #424242;
            width: 350px;
            height: 350px;
            position: absolute;
            top: 170px;
            right: 20px;
            border: 3px solid #3fb3e5;
            border-radius: 50%;
            z-index: 2;
        }
        .tuika_cardbox .cardview img {
            position: absolute;
            left: 0;
            animation: cardmove 3s ease 0s infinite normal;
            -moz-animation: cardmove 3s ease 0s infinite normal;
            -webkit-animation: cardmove 3s ease 0s infinite normal;
            -o-animation: cardmove 3s ease 0s infinite normal;
        }
        @keyframes cardmove {
            0% {
                left:216px;
                top:326px;
            }
            50% {
                left:82px;
                top:286px;width:188px;heigh:104px;
            }
            100% {
                left:112px;
                top:184px;width:120px;heigh:20px;
            }
        }
        /* Firefox: */
        @-moz-keyframes cardmove {  0% {
            left:216px;
            top:326px;
        }
            50% {
                left:82px;
                top:286px;width:188px;heigh:104px;
            }
            100% {
                left:112px;
                top:184px;width:120px;heigh:20px;
            }
        }
        /*Safari and Chrome*/
        @-webkit-keyframes cardmove {  0% {
            left:216px;
            top:326px;
        }
            50% {
                left:82px;
                top:286px;width:188px;heigh:104px;
            }
            100% {
                left:112px;
                top:184px;width:120px;heigh:20px;
            }
        }
        /* Opera: */
        @-o-keyframes cardmove {  0% {
            left:216px;
            top:326px;
        }
            50% {
                left:82px;
                top:286px;width:188px;heigh:104px;
            }
            100% {
                left:112px;
                top:184px;width:120px;heigh:20px;
            }
        }
        /*.read_arrow {*/
        /*    position: absolute;*/
        /*    top: 50%;*/
        /*    left: 50%;*/
        /*    margin-left: -110px;*/
        /*    margin-top: -40px;*/
        /*    border-right: 80px solid #fff;*/
        /*    border-top: 15px solid transparent;*/
        /*    border-bottom: 15px solid transparent;*/
        /*    font-size: 0;*/
        /*    height: 0;*/
        /*    line-height: 0;*/
        /*    width: 0;*/
        /*}*/
        /*.read_arrow3 {*/
        /*    position: absolute;*/
        /*    top: 50%;*/
        /*    left: 50%;*/
        /*    margin-left: -140px;*/
        /*    margin-top: -35px;*/
        /*    border-right: 100px solid #fff;*/
        /*    border-top: 15px solid transparent;*/
        /*    border-bottom: 15px solid transparent;*/
        /*    font-size: 0;*/
        /*    height: 0;*/
        /*    line-height: 0;*/
        /*    width: 0;*/
        /*}*/
    </style>
</head>

<body>
<div class="container inner">
    <div class="header">
        <div class="logo"><em class="_devName"></em></div>
    </div>
    <div class="contentbox">
        <div class="bar">
            您正在办理：<strong>购卡业务</strong>
        </div>
        <div class="mainbox" style="overflow: hidden">
            <h2 class="maintit">请按页面提示，在图示位置刷银联卡</h2>
            <div class="robot"><img src="../../../../personal/images/robot.png"></div>
            <div class="tuika_cardbox">
                <div class="cardview"><img src="../../../images/768_1366/hand.png" width="188"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <input type="button" value="放弃购卡" name="exit" class="exit" voice-control="首页,退出,放弃"/>
        <div class="timing">剩余操作时间：<span>60</span></div>
    </div>
    <div class="banner">
        <ul></ul>
        <ol></ol>
        <i class="left"></i><i class="right"></i>
    </div>
</div>
</body>
</html>

<script src="../../../js/frame/jquery.min.js"></script>
<script src="../../../js/frame/browser.js"></script>
<script src="../../../js/frame/banner.js"></script>
<script src="../../../js/frame/wtsd.utils.js"></script>
<script src="../../../../personal/js/Module.js"></script>
<script src="../../../../personal/js/Config.js"></script>
<script src="../../../../personal/js/TicketFormat.js"></script>
<script src="../../../../personal/js/Sound.js"></script>
<script src="../../../js/driver/BaseDriver.js"></script>
<script src="../../../js/driver/CardBox.js"></script>
<script src="../../../js/driver/CashBox.js"></script>
<script src="../../../js/driver/POS.js"></script>
<script src="../../../js/driver/Printer.js"></script>
<script src="../../../js/driver/QuckPass.js"></script>
<script src="../../../js/driver/LED.js"></script>
<script src="../../../js/driver/MultiIO.js"></script>
<script src="../../../js/driver/Common.js"></script>
<script src="../../../js/driver/Xunfei.js"></script>
<script src="../../../js/gateway/BFE.js"></script>
<script src="../../../js/gateway/TFE.js"></script>
<script src="../../../js/biz/common/BizCache.js"></script>
<script src="../../../js/biz/common/PageTools.js"></script>
<script src="../../../js/frame/chat.js"></script>
<script src="../../../js/frame/lib.js"></script>
<script src="../../../js/frame/voice-control.js"></script>
<script src="../../../js/biz/salecard/step-3-pay-quick.js"></script>